<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="num ++">num:{{num}}</button>
        <button @click="num ++">num:{{num}}</button>
        <button @click="num ++">num:{{num}}</button>
        <button @click="num ++">num:{{num}}</button>
        <hr>
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-btn></my-btn>
        <my-div></my-div>
        <my-div></my-div>
        <hr>
        <com1></com1>
    </div>
    <template id="com1">
        <div>
            <table border="1">
                <tr>
                    <td>1-1</td>
                    <td>1-2</td>
                    <td>1-3</td>
                </tr>
                <tr>
                    <td>2-1</td>
                    <td>2-2</td>
                    <td>{{info}}</td>
                </tr>
            </table>
            <com2></com2>
        </div>
    </template>
    <template id="com2">
        <div>
            <p>我是子组件</p>
        </div>
    </template>
    <script src="../0511/js/vue.js"></script>
    <script>
        // 全局注册，放在实例的外面和前面
        Vue.component('myDiv', {
            template: `
                <div>
                    <p>我是一个全局注册的组件</p>
                </div>
            `
        })
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'hi',
                num: 0
            },
            components: {
                'myBtn': {
                    template:`<button @click="count ++">count:{{count}}</button>`,
                    data() {
                        return {
                            count: 0
                        }
                    }
                },
                'com1': {
                    template: '#com1',
                    data() {
                        return {
                            info: '2022-5-19'
                        }
                    },
                    components: {
                        'com2': {
                            template: '#com2',
                            created() {
                                console.log('子组件com2-前来觐见！');
                            }
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>